<template>

    <div class="column-detail-page w-75 mx-auto">
        <div class="column-info row mb-4 border-bottom pb-4 align-items-center">
          <div class="col-3 text-center">
            <img :src="column.avatar && column.avatar.fitUrl" :alt="column?.title" class="rounded-circle border border-light w-100 ">
          </div>    
          <div class="col-9">
            <h4>{{ column?.title }}</h4>
            <p class="text-muted">{{ column?.description }}</p>
          </div>
        </div>
    </div>
    <post-list :list="list" class="w-75 mx-auto"></post-list>

</template>
<script lang="ts">
import { computed, defineComponent,onMounted,watch } from 'vue';
import {useRoute} from 'vue-router'
import {addColumnAvatar} from '../helper'
// import {testData,testPosts} from '../testData'
import {useStore} from 'vuex'
import {GlooalDataProps} from '../store'
import PostList from './PostList.vue'
import {generateFitUrl} from '../helper'
export default defineComponent({
    components:{
        PostList,

    },
    setup() {
        const store = useStore<GlooalDataProps>()
     
        const route =useRoute()
        let currentId= route.params.id
      
        onMounted(()=>{
          
          store.dispatch('fetchColumn',currentId)
          store.dispatch('fetchPosts',currentId)
          // console.log(store.state.columns)
        })
        //监听路由变化
        watch(()=>route.params.id,
          (newId)=>{
         
            currentId = newId
            store.dispatch('fetchColumn',currentId)
            store.dispatch('fetchPosts',currentId)
          
          }
        )
        const column = computed(()=>{
          const selectColumn = store.getters.getColumnById(currentId)
          if(selectColumn) {
            if(!selectColumn.avatar) {
              addColumnAvatar(selectColumn, 100, 100)
            } else {
              generateFitUrl(selectColumn.avatar, 100, 100)
            }
          }
          return selectColumn
        }


        )
        
        const list = computed(()=>store.getters.getPostsByCid(currentId))
        return {
            column,
            list

        }
    },}
)
</script>